<template>
  <div>
    <audio
      v-if="viewType==='audio'"
      width="100%"
      controls="controls"
      controlslist="nodownload"
      ref="viewAudio"
    >
      <source
        :src="viewFileUrl"
        type="audio/mp3"
      />
      <source
        :src="viewFileUrl"
        type="audio/ogg"
      />
      <source
        :src="viewFileUrl"
        type="audio/mpeg"
      />
      <embed
        width="100%"
        :src="viewFileUrl"
      />
    </audio>
    <!-- disablePictureInPicture取消画中画 -->
    <video
      v-else-if="viewType==='video'"
      width="100%"
      controls="controls"
      controlslist="nodownload"
      disablePictureInPicture
    >
      <source
        :src="viewFileUrl"
        type="video/mp4"
      />
      <source
        :src="viewFileUrl"
        type="video/ogg"
      />
      <source
        :src="viewFileUrl"
        type="video/webm"
      />
      <object
        :data="viewFileUrl"
        width="100%"
      >
        <embed
          :src="viewFileUrl"
          width="100%"
        />
      </object>
    </video>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({
  name: 'mediaPreview'
})
export default class extends Vue {
  @Prop({ default: '' }) public viewFileUrl!: string;
  @Prop({ default: '' }) public viewType!: string;
}
</script>
<style lang="stylus" scoped>
</style>
